<template>
	<view class="index">

		<cu-custom-header bgColor="bg-topic-theme" :isBack="true" class="custom">
			<block slot="backText" class="text-sm location">清华大学</block>
		</cu-custom-header>
		<!-- 最底层下拉刷新辅助的view -->
		<view class="refresh"></view>
		<view class="container">
			<view class="my-background-circle bg-topic-theme"></view>
			<!-- 轮播-begin -->
			<swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			 duration="500" @change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#F8D347">
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
						<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
					</view>
				</swiper-item>
			</swiper>
			<!-- 轮播-end -->
			<!-- 九宫格-begin -->
			<Grid @hrefSort="hrefSort" :gridCol="gridCol" :cuIconList="cuIconList"></Grid>
			<!-- 九宫格-end -->
			<!-- tab栏切换-begin -->
			<scroll-view scroll-x class="nav nav-liner" :style="isFixed?'position:fixed;top:'+customHeight+'px;':'position:relative;top:unset;'"
			 scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'text-black':''" v-for="(item,index) in sortList" :key="index" @tap="tabSelect"
				 :data-id="index">
					<view class="cu-bar justify-center">
						<view class="action sub-title">
							<text class="text-sm text-bold text-black" :class="index==TabCur?'text-focus':''">{{item.name}}</text>
							<text class="bg-topic-theme" :class="index==TabCur?'isFocus':'foucus-no'" style="width:3rem"></text>
							<!-- last-child选择器-->
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 辅助tab栏固定 -->
			<view :style="{height:isFixed?'90rpx':'0'}"></view>

			<!-- tab栏切换-end -->
			<view class="goods" :style="{marginLeft:'-'+TabCur*100+'vw'}">
				<view class="good">
					<Goods @clickHref="hrefstoreDetail" :isMore="isMore1" :goods="goodslist1" :colWidth="colWidth" :col="col"></Goods>
				</view>
				<view class="good">
					<Goods @clickHref="hrefstoreDetail" :isMore="isMore2" :goods="goodslist2" :colWidth="colWidth" :col="col"></Goods>
				</view>
				<view class="good">
					<Goods @clickHref="hrefstoreDetail" :isMore="isMore3" :goods="goodslist3" :colWidth="colWidth" :col="col"></Goods>
				</view>
				<view class="good">
					<Goods @clickHref="hrefstoreDetail" :isMore="isMore4" :goods="goodslist4" :colWidth="colWidth" :col="col"></Goods>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import Grid from "@/components/grid.vue"
	import Goods from "@/components/goods.vue"
	export default {
		components: {
			Grid,
			Goods
		},
		data() {
			return {
				cardCur: 0,
				lastTabCur: 0,
				TabCur: 0,
				scrollLeft: 0,
				scrollHeight: 0,
				customHeight: 0,
				marginTop: 0,
				isFixed: false,
				gridCol: 4,
				cuIconList: [{
					cuIcon: 'choicenessfill',
					color: 'red',
					badge: 120,
					name: '日用百货'
				}, {
					cuIcon: 'recordfill',
					color: 'orange',
					badge: 1,
					name: '文化娱乐'
				}, {
					cuIcon: 'clothesfill',
					color: 'yellow',
					badge: 0,
					name: '服饰鞋包'
				}, {
					cuIcon: 'cardboardfill',
					color: 'olive',
					badge: 22,
					name: '文化娱乐'
				}, {
					cuIcon: 'discoverfill',
					color: 'purple',
					badge: 0,
					name: '个护化妆'
				}, {
					cuIcon: 'explorefill',
					color: 'blue',
					badge: 0,
					name: '电脑数码'
				}, {
					cuIcon: 'rankfill',
					color: 'purple',
					badge: 0,
					name: '图书杂志'
				}, {
					cuIcon: 'sort',
					color: 'mauve',
					badge: 0,
					name: '其他'
				}, {
					cuIcon: 'commandfill',
					color: 'purple',
					badge: 0,
					name: '文化娱乐'
				}, {
					cuIcon: 'brandfill',
					color: 'mauve',
					badge: 0,
					name: '其他'
				}],
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}, {
					id: 6,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}],
				sortList: [{
						id: 1,
						name: '最新上架',
						code: 'newest'
					},
					{
						id: 2,
						name: '全新闲置',
						code: 'like'
					},
					{
						id: 3,
						name: '低价秒杀',
						code: 'cheap'
					},
					{
						id: 4,
						name: '大家都看',
						code: 'everbody'
					}
				],
				goodslist1: [],
				goodslist2: [],
				goodslist3: [],
				goodslist4: [],
				isMore1: true,
				isMore2: true,
				isMore3: true,
				isMore4: true,
				page: 1,
				pageSize: 20,
				pagePrice: 1,
				pageLook: 1,
				pageNew: 1,
				isFresh: false,
				col: 2,
				colWidth: 172

			}
		},
		mounted() {
			this.getCol()
			// this.selectGoods()
		},
		methods: {
			onPullDownRefresh() {
				//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
				this.page = 1
				this.pageLook = 1
				this.pageNew = 1
				this.pagePrice = 1
				this.goodslist1 = []
				this.goodslist2 = []
				this.goodslist3 = []
				this.goodslist4 = []
				this.isFresh = true
				this.TabCur = 0
				uni.showLoading({
					title: "刷新中..."
				})
				this.getCol()
			},
			//最新上架的物品
			selectGoods() {
				uniCloud.callFunction({
					name: "selectGoods",
					data: {
						page: this.page,
						pageSize: this.pageSize
					}
				}).then((res) => {
					console.log("分页查询商品1:", res)
					// this.goodslist1 = res.result.list.data
					this.goodslist1 = this.handleArray(res.result.list.data)
					if (this.goodslist1.length < this.pageSize) {
						this.isMore1 = false
					}
					this.page++
					if (!this.isFresh) {
						uni.hideLoading()
					}
					console.log(this.goodslist1)
					uni.stopPullDownRefresh()
					uni.hideLoading()

				}).catch((err) => {
					console.log("错误:", err)
					uni.showToast({
						title: "网络错误~",
						icon: "none",
						duration: 1500
					})
				})
			},
			//全新闲置
			selectNew() {
				uniCloud.callFunction({
					name: "selectNew",
					data: {
						page: this.pageNew,
						pageSize: this.pageSize
					}
				}).then((res) => {
					console.log("分页查询商品2:", res)

					this.goodslist2 = this.handleArray(res.result.list.data)
					if (this.goodslist2.length < this.pageSize) {
						this.isMore2 = false
					}
					this.pageNew++
					if (!this.isFresh) {
						uni.hideLoading()
					}
					console.log(this.goodslist2)
					uni.stopPullDownRefresh()
					uni.hideLoading()
				}).catch((err) => {
					console.log("错误:", err)
					uni.showToast({
						title: "网络错误~",
						icon: "none",
						duration: 1500
					})
				})
			},
			//	低价秒杀的物品
			selectDownPrice() {
				uniCloud.callFunction({
					name: "selectDownPrice",
					data: {
						page: this.pagePrice,
						pageSize: this.pageSize
					}
				}).then((res) => {
					console.log("分页查询商品3:", res)
					this.goodslist3 = this.handleArray(res.result.list.data)
					if (this.goodslist3.length < this.pageSize) {
						this.isMore3 = false
					}
					this.pagePrice++
					if (!this.isFresh) {
						uni.hideLoading()
					}
					console.log(this.goodslist3)
					uni.stopPullDownRefresh()
					uni.hideLoading()
				}).catch((err) => {
					console.log("错误:", err)
					uni.showToast({
						title: "网络错误~",
						icon: "none",
						duration: 1500
					})
				})
			},
			//浏览人数最多的物品
			selectLook() {
				uniCloud.callFunction({
					name: "selectLook",
					data: {
						page: this.pageLook,
						pageSize: this.pageSize
					}
				}).then((res) => {
					console.log("分页查询商品4:", res)
					this.goodslist4 = this.handleArray(res.result.list.data)
					this.isMore4 = true
					if (this.goodslist4.length < this.pageSize) {
						this.isMore4 = false
					}
					this.pageLook++
					if (!this.isFresh) {
						uni.hideLoading()
					}
					console.log(this.goodslist4)
					uni.stopPullDownRefresh()
					uni.hideLoading()
				}).catch((err) => {
					console.log("错误:", err)
					uni.showToast({
						title: "网络错误~",
						icon: "none",
						duration: 1500
					})
				})
			},
			//轮播图的事件
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			//tab栏切换事件
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.getCol()
			},
			//商品点击事件
			hrefstoreDetail(item) {
				console.log("item:", item)
				uni.navigateTo({
					url: "/view/storeDetail?item=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			onReady() { //页面初次渲染完毕执行
				// console.log(this.$store.state.user)
				const query = uni.createSelectorQuery().in(this);
				query.select('.custom').boundingClientRect(data => {
					this.customHeight = data.height
				}).exec();
				query.select('.nav-liner').boundingClientRect(data => {
					this.scrollHeight = data.top - this.customHeight
					this.marginTop = data.height
				}).exec();
			},
			hrefSort(item) {
				uni.navigateTo({
					url: "../../view/sort?item=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			onPageScroll(res) {
				if (res.scrollTop >= this.scrollHeight) {
					this.isFixed = true
				} else {
					this.isFixed = false
				}

			},
			add() {
				uni.showLoading({
					title: '处理中...'
				})
				uniCloud.callFunction({
					name: 'add',
					data: {
						name: 'DCloud',
						subType: 'uniCloud',
						createTime: Date.now()
					}
				}).then((res) => {
					uni.hideLoading()
					uni.showModal({
						content: `成功添加一条数据，文档id为：${res.result.id}`,
						showCancel: false
					})
					console.log(res)
				}).catch((err) => {
					uni.hideLoading()
					uni.showModal({
						content: `添加数据失败，错误信息为：${err.message}`,
						showCancel: false
					})
					console.error(err)
				})
			},


			//根据设备宽度计算总列数
			getCol() {
				// if(this.screenWidth<500)
				// {
				this.colWidth = this.screenWidth / 2 - 15
				if (this.TabCur == 0 && this.goodslist2.length == 0) {
					this.selectGoods()
				} else if (this.TabCur == 1 && this.goodslist2.length == 0) {
					this.selectNew()
				} else if (this.TabCur == 2 && this.goodslist3.length == 0) {
					this.selectDownPrice()
				} else if (this.TabCur == 3 && this.goodslist4.length == 0) {
					this.selectLook()
				}

				// }
				// else{
				// 	this.colWidth=192
				// 	this.col = this.screenWidth/3
				// 	this.selectGoods()
				// }
			},
			//把数组格式化为目标数组形式
			handleArray(arr) {
				console.log("需处理的数组：", arr)
				let operateArr = []
				for (let i = 0; i < this.col; i++) {
					operateArr.push([])
				}
				console.log("数组容器：", operateArr)
				for (let i = 0, j = 0; i < arr.length; i++) {
					if (j < this.col) {
						operateArr[j].push(arr[i])
						j++
					} else {
						j = 0
						operateArr[j].push(arr[i])
						j++
					}

				}
				console.log("处理后的数组：", operateArr)
				return operateArr
			}
		}

	}
</script>

<style lang="scss" scoped>
	.index {
		min-height: 100vh;
		overflow-x: hidden;

		.refresh {
			position: fixed;
			z-index: -1;
			background-color: #F8D347;
			width: 100vw;
			height: 50vh;
			top: 0;
			left: 0;
		}

		.container {
			position: relative;
			background-color: #FFFFFF;

			.my-background-circle {
				position: absolute;
				width: 100%;
				height: 200rpx;
				/* #ifdef APP-PLUS */
				height: 240rpx;
				/* #endif */
				height: 280rpx;
				border-radius: 0 0 50% 50% / 0% 0% 15% 15%;
				overflow: hidden;
			}

			.goods {
				background-color: #EEEEEE;
				display: flex;
				position: relative;
				width: 400vw;
				margin-left: 0;
				transition: .5s all;

				.good {
					flex: 1;
				}
			}

		}
	}

	.isFixed-true {
		position: fixed;
	}

	.Tabcur-1 {
		margin-left: -100vw;
	}

	.marginTopTab {
		margin-top: 90rpx;
	}

	.nav-liner {
		background: linear-gradient(top, #FFFFFF 0%, #eeeeee 100%);
		z-index: 99;
	}

	.sub-title {
		text {
			font-size: 32rpx;
		}
	}

	.nav .cu-item {
		margin: 0;
	}

	.location {
		max-width: 200rpx;
		overflow-x: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.text-focus {
		font-size: 36rpx !important;
	}

	.isFocus {
		display: inline-block;
	}

	.foucus-no {
		display: none !important;
	}

	.cu-bar .action.sub-title text[class*="bg-"]:last-child {
		position: absolute;
		display: inline-block;
		bottom: 0.5rem;
		border-radius: 6rpx;
		width: 100%;
		height: 0.3rem;
		// left: 0.6rem;
		opacity: 0.8;
		z-index: 0;

	}

	.cu-bar .action:first-child {
		margin-left: 0;
	}

	.cu-bar .action:last-child {
		margin-right: 0;
	}

	.content {
		padding-bottom: 30px;
	}

	.title {
		font-weight: bold;
		text-align: center;
		padding: 20px 0px;
		font-size: 20px;
	}

	.tips {
		color: #999999;
		font-size: 14px;
		padding: 20px 30px;
	}

	.btn-list {
		padding: 0px 30px;
	}

	.btn-list button {
		margin-bottom: 20px;
	}

	.upload-preview {
		width: 100%;
	}
</style>
